<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<!-- <view class="back iconfont icon-xiangzuo1" @tap="backPage"></view> -->
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">我的</view>
		</view>
		<view class="bg_box">
			<image class="bg01" src="/static/bg05.png" mode="widthFix"></image>
			<view class="bg_content">
				<view class="name_box" >
					
					<block v-if="!hasLogin" >
						<view class="avatar" @click="to_login()">
							<image src="/static/tx01.png" mode="scaleToFill"></image>
						</view>
						<view class="name_text">
							<view class="name" @click="to_login()">请先登录</view>
							<view class="realname">
								<view class="real" :data-url="'/pages/personalcenter/standing'" @click="gotopage">
									<view class="t">去实名</view>
									<view class="r iconfont icon-xiangyou1"></view>
								</view>
							</view>
						</view>
						<view class="message" :data-url="'/pages/personalcenter/message'" @click="gotopage01">
							<view class="icon iconfont icon-xiaoxi"></view>
							<!-- <view class="round"></view> -->
						</view>
					</block>
					<block v-else>
						<view class="avatar" :data-url="'/pages/personalcenter/settings/profile'" @click="gotopage">
							<image :src="realUrl(userInfo.headimg)" mode="scaleToFill"></image>
						</view>
						<view class="name_text">
							<view class="name">{{userInfo.nickname}}</view>
							<view class="realname">
								<view class="real" :data-url="'/pages/personalcenter/standing'" @click="gotopage">
									<view class="t">去实名</view>
									<view class="r iconfont icon-xiangyou1"></view>
								</view>
							</view>
						</view>
						<view class="message" :data-url="'/pages/personalcenter/message'" @click="gotopage01">
							<view class="icon iconfont icon-xiaoxi"></view>
							<view class="round" v-if="info.msg_num > 0"></view>
						</view>
					</block>
					
				</view>

				<view class="menu_box">
					<view class="menu" data-url="" @click="gotopage">
						<view class="num">{{info.car_num}}</view>
						<view class="text">车辆在还(笔)</view>
					</view>
					<view class="menu" data-url="" @click="gotopage">
						<view class="num">{{info.expire_num}}</view>
						<view class="text">逾期次数(次)</view>
					</view>
					<view class="menu" data-url="" @click="gotopage">
						<view class="num">{{info.apply_m}}</view>
						<view class="text">申请金额(元)</view>
					</view>
				</view>

				<view class="apply_box">
					<view class="title_box">
						<view class="title">我的申请</view>
						<view class="arrow" :data-url="'/pages/order/order?otype=0'" @click="gotopage02">
							<view class="i iconfont icon-lingyongshenqing"></view>
							<view class="t">全部申请</view>
							<view class="a iconfont icon-xiangyou1"></view>
						</view>
					</view>
					<view class="apply_menu">
						<view class="menu" :data-url="'/pages/order/order?otype=1'" @click="gotopage02">
							<view class="icon">
								<image src="/static/menu/menu09.png" mode="widthFix"></image>
							</view>
							<view class="text">待审核</view>
						</view>
						<view class="menu" :data-url="'/pages/order/order?otype=2'" @click="gotopage02">
							<view class="icon">
								<image src="/static/menu/menu10.png" mode="widthFix"></image>
							</view>
							<view class="text">已通过</view>
						</view>
						<view class="menu" :data-url="'/pages/order/order?otype=3'" @click="gotopage02">
							<view class="icon">
								<image src="/static/menu/menu11.png" mode="widthFix"></image>
							</view>
							<view class="text">已完成</view>
						</view>
						<view class="menu" :data-url="'/pages/order/order?otype=4'" @click="gotopage02">
							<view class="icon">
								<image src="/static/menu/menu12.png" mode="widthFix"></image>
							</view>
							<view class="text">审核失败</view>
						</view>

					</view>
				</view>

				<view class="list_box">
					<view class="list" :data-url="'/pages/personalcenter/appoint/appoint'" @click="gotopage">
						<view class="icon">
							<image src="/static/menu/menu03.png" mode="widthFix"></image>
						</view>
						<view class="title">约定履约</view>
						<view class="text">最近履约日 </view>
						<view class="time">{{info.end_pay_date||'暂无'}}</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
					<view class="list" :data-url="'/pages/personalcenter/car/car'" @click="gotopage">
						<view class="icon">
							<image src="/static/menu/menu01.png" mode="widthFix"></image>
						</view>
						<view class="title">我的爱车</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
					<view class="list" :data-url="'/pages/personalcenter/bank/bank'" @click="gotopage">
						<view class="icon">
							<image src="/static/menu/menu04.png" mode="widthFix"></image>
						</view>
						<view class="title">我的账户</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
					<view class="list" :data-url="'/pages/personalcenter/trading'" @click="gotopage">
						<view class="icon">
							<image src="/static/menu/menu13.png" mode="widthFix"></image>
						</view>
						<view class="title">交易记录</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
				</view>

				<view class="list_box">
					<view class="list" style="position: relative;">
						<view class="icon">
							<image src="/static/menu/menu14.png" mode="widthFix"></image>
						</view>
						<view class="title">我的客服</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
						<button open-type="contact" class="contact"></button>
					</view>
					<view class="list" :data-url="'/pages/personalcenter/settings/settings'" @click="gotopage">
						<view class="icon">
							<image src="/static/menu/menu15.png" mode="widthFix"></image>
						</view>
						<view class="title">系统设置</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
				</view>
				
			
				<view style="height: 40rpx;"></view>
				<view class="confirm" style="position: relative;" @click="to_login_out()" v-if="hasLogin">退出登录</view>
				<view class="confirm" style="position: relative;" @click="colsePupu" v-else>点击登录</view>
				<view class="clear_box01"></view>
			</view>		
			
		</view>

	      
		<!-- 弹窗 -->
		<view class="show_box" v-show="pupu_show" @click="colsePupu($event)">
			<view class="pupu_box" @click.stop.prevent>
				<view class="text">获取手机号快捷登录</view>
				<view class="shuom">
					<view>获取您的手机号用于快捷登录</view>
				</view>
				<view class="loky">
					<view class="xx" @tap="colsePupu">取消</view>
					<!-- #ifdef H5 -->
					<view class="xt" @click="getUserInfo()">
					<!-- #endif -->

						<!-- #ifndef H5 -->
						<view class="xt">
						<!-- #endif -->
							手机号登录
							<!-- 	<button
							style="display:block;width:40vw;height: 40px;margin-top:-39px;margin-left: -8px; opacity:0.0;"
							class="wx_box iconfont xt"
							type="default"
							open-type="getUserInfo"
							@getuserinfo="getUserInfo"
							withCredentials="true"
						></button> -->

							<button
								style="display:block;width:40vw;height: 40px;margin-top:-39px;margin-left: -8px; opacity:0.0;"
								class="wx_box iconfont xt" type="default" open-type="getPhoneNumber"
								@getphonenumber="getPhoneNumber" withCredentials="true"></button>

						</view>
					</view>
				</view>
			</view>

			<PrivacyPop ref="PrivacyPopck"></PrivacyPop>
			<link-us :pupu_show="pshow" :hand_plat_phones="hand_plat_phones" @pu_close="pu_close"></link-us>
		</view>
		<!-- 弹窗 -->

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import PrivacyPop from '@/components/PrivacyPop.vue';
	import linkUs from '@/components/link-us.vue';
	export default {
		components: {
			PrivacyPop,
			linkUs
		},
		data() {
			return {
				page: 1,
				scrrol: false,
				info: '',
				pshow: false,
				pupu_show: 0,
				jscode: '',
				pid: 0,
				qrcode: '',
				info: {
					car_num: 0,
					expire_num: 0,
					apply_m: 0,
					end_pay_date : '',
					msg_num : 0,
				
				}

			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			hand_plat_phones() {
				if (this.vuex?.appInfo?.plat_phone) {
					let str = this.vuex.appInfo.plat_phone.toString();
					let plat_phones = str.split('|');
					return plat_phones;
				}
		
			},
		},
		onPullDownRefresh() {
			uni.$emit('auto_update');
			setTimeout(() => {
				this.showMsg('刷新成功');
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad(opt) {
	        this.set_pid(opt);
			this.get_code();
			if (!this.hasLogin) {
				this.$refs.PrivacyPopck.checkPrivacySetting();
			} else {
				this.initData();
			}
		},
		onPageScroll: function(Object) {
			if (Object.scrollTop > 28) {
				this.scrrol = true;
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
			}
		},
		methods: {
			...mapMutations(['login', 'logout']),
			pu_show() {
				this.pshow = !this.pshow;
			},
			set_pid(opt) {
				if (opt?.q) {
					let qr_url = decodeURIComponent(opt.q) || '';
					if (qr_url != '') {
						let pid = qr_url.split('=')[1];
						this.pid = pid || 0;
					}
				} else {
					if (opt.pid) {
						this.pid = opt.pid ?? 0;
					} else if (opt.scene) {
						let args = this.get_args(opt.scene);
						this.pid = args.pid ?? 0;
					}
				}
				this.$nextTick(() => {
					// 这个函数会在 DOM 更新后执行  
					setTimeout(() => {
						if (this.pid == 0) {
							this.pid = uni.getStorageSync('pid');
						}
					}, 200);
				});
			},
			pu_close() {
				this.pshow = false;
			},
			initData() {
				let url = this.site_url + 'api/auth/member/loans_user_total';
				this.areq(url).then(res => {
					if (res.code == 1) {
						this.info = res.data;
					}
				})
		
			},
			call_plat_phone() {
				this.pu_show();
			},
			gotopage01(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},
			gotopage(e) {

				if (!this.hasLogin) {
					//this.showMsg('请先登录');
					this.pupu_show = true;
					return false;
				}
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},
			gotopage02(e) {
				if (!this.hasLogin) {
					//this.showMsg('请先登录');
					this.pupu_show = true;
					return false;
				}
				let url = e.currentTarget.dataset.url;
				this.$r(url,'rel');
			},
			to_login(){
				this.pupu_show = true;
			},
			to_login_out() {
				this.showMsg('退出成功');
				this.logout();
				setTimeout(() => {
					this.$r('/pages/personal/personal', 'rel')
				}, 1500)
			},
			colsePupu(ev) {
				this.pupu_show = !this.pupu_show;
			},
			getPhoneNumber: function(e) {
				if (this.jscode == '') {
					setTimeout(() => {
		
					}, 600)
				};
				uni.$u.throttle(() => {
					this.real_getPhoneNumber(e);
				}, 3000);
			},
			real_getPhoneNumber(e) {
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
					this.showMsg('需要授权获取你的手机号');
				} else {
					//允许授权  
					if (this.jscode == '') {
						this.showMsg('网络有误,请刷新小程序');
						return false;
					}
					// console.log(e.detail.encryptedData)  
					let param = {
						appId: 'wx70aa26b5d0445642',
						encryptedData: e.detail.encryptedData, //加密的用户信息 
						iv: e.detail.iv, //加密算法的初始向量   
						jscode: this.jscode,
						pid: this.pid
					}
					this.req({
						url: this.site_url + 'api/login/get_wx_phone',
						data: param,
						method: 'POST',
						success: (res) => {
							let ret = res.data;
							// console.log(ret)
							if (ret.code == 1) {
								this.pupu_show = false;
								let user = ret.data;
								this.login(user);
								uni.setStorageSync('token', ret.token);
								uni.setStorageSync('pid', 0);
								this.showMsg('登录成功', 1500, true, 'success')
								//uni.$emit('auto_update');
								this.$emit('init_order');
								setTimeout(() => {
									this.initData();
								}, 300);
		
		
							} else {
								this.showMsg(ret.msg)
							}
		
						},
						fail: (err) => {
							console.log(err)
						}
					});
		
		
				}
		
			},
			get_code() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						// console.log(loginRes)
						this.jscode = loginRes.code;
					}
				});
			},
			get_userinfo(e) {
				uni.$u.throttle(() => {
					this.real_get_userinfo(e);
				}, 3000);
			},
			real_get_userinfo(e) {
				this.get_code();
				let _this = this;
				// 获取用户信息
				wx.getUserProfile({
					lang: 'zh_CN',
					desc: '用于完善会员资料',
					success: res => {
						_this.pupu_show = false;
						// _this.login_info = res.rawData;	
						_this.postLogin(res);
		
					},
					// 失败回调
					fail: (err) => {
						// 弹出错误
						this.pupu_show = false;
						this.showMsg('已拒绝小程序获取信息');
		
					}
				});
		
			},
			postLogin(infoRes) {
				uni.showLoading({
					title: '授权登陆中',
					mask: true
				});
				let _this = this;
				let code = this.code;
				let share_uid = uni.getStorageSync('share_uid') || 0;
		
				let name = infoRes.userInfo.nickName;
				let pic = infoRes.userInfo.avatarUrl;
				let encryptedData = infoRes.encryptedData;
				let iv = infoRes.iv;
		
				_this.req({
					url: 'api/login/wx_mp_login',
					method: 'POST',
					data: {
						pid: share_uid,
						nickname: name,
						headpic: pic,
						jscode: code,
						iv: iv,
						encryptedData: encryptedData
					},
					success: res => {
						uni.hideLoading();
						let ret = res.data;
						if (ret.status == 1) {
							_this.login(ret.data);
							//登录成功
							try {
								uni.setStorageSync('token', ret.token);
								_this.showMsg('登录成功', 1500, true, 'success');
								_this.pupu_show = false;
							} catch (err) {
								// _this.j(err);
							}
		
						} else {
							_this.showMsg(ret.msg)
							//新用户
							//_this.openGetPhone();
						}
					},
					fail: err => {
						uni.hideLoading();
					}
				});
			},
			getUserInfo1(res) {
				uni.showLoading({
					title: '授权登陆中',
					mask: true
				});
				let _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						// console.log(loginRes);
						let code = loginRes.code;
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								//console.log(infoRes);
								// console.log('用户昵称为：' + infoRes.userInfo.nickName);
								let name = infoRes.userInfo.nickName;
								let pic = infoRes.userInfo.avatarUrl;
								let encryptedData = infoRes.encryptedData;
								let iv = infoRes.iv;
		
								let share_uid = uni.getStorageSync('share_uid') || 0;
								_this.req({
									url: 'api/login/wx_mp_login',
									method: 'POST',
									data: {
										pid: share_uid,
										nickname: name,
										headpic: pic,
										jscode: code,
										iv: iv,
										encryptedData: encryptedData
									},
									success: res => {
										uni.hideLoading();
										let ret = res.data;
										if (ret.status == 1) {
											_this.login(ret.data);
											//登录成功
											try {
												uni.setStorageSync('token', ret.token);
												_this.showMsg('登录成功');
												_this.pupu_show = false;
											} catch (err) {
												// _this.j(err);
											}
										} else {
											_this.showMsg(ret.msg);
										}
									},
									fail: err => {
										uni.hideLoading();
									}
								});
							}
						});
					}
				});
			},
			auto_login() {
				let userInfo = uni.getStorageSync('userInfo') || '';
				if (userInfo.id) {
					this.req({
						url: 'api/user/auto_login',
						method: 'GET',
						data: {
							uid: userInfo.id
						},
						success: res => {
							setTimeout(() => {
								uni.stopPullDownRefresh();
							}, 1000);
							let ret = res.data;
							if (ret.status == 1) {
								this.login(ret.data);
							} else {
								this.showMsg('登录态已失效');
								setTimeout(() => {
									this.logout();
									this.pupu_show = true;
								}, 1500);
							}
						},
						fail: err => {
							this.showMsg('网络错误');
							setTimeout(() => {
								uni.stopPullDownRefresh();
							}, 1000);
						}
					});
				} else {
					setTimeout(() => {
						uni.stopPullDownRefresh();
					}, 1000);
				}
			},
		},
	
	
	}
</script>

<style>
	.contact {
		position: absolute;
		width: 88vw;
		height: 14vw;
		opacity: 0;
		left: 0;
		top: 0;
		z-index: 99;
	}
	
	.header {
		background-color: transparent !important;
	}

	.header .text {
		background-color: transparent !important;
		color: #333 !important;
	}

	.scrrolHeader {
		background-color: #F9E9E3 !important;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
	}

	.bg_box .bg_content {
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}

	.name_box {
		width: 100%;
		margin-top: 4%;
		display: flex;
		align-items: center;
	}

	.name_box .avatar {
		width: 18vw;
		height: 18vw;
		margin-right: 4%;
		margin-left: 4%;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.name_box .avatar image {
		width: 90%;
		height: 90%;
		border-radius: 50%;
	}

	.name_box .name_text {
		flex: 1;
	}

	.name_box .name_text .name {
		font-size: 5vw;
		color: #333;
		font-weight: bold;
	}

	.name_box .name_text .realname {
		margin-top: 2vw;
		display: flex;
	}

	.name_box .name_text .realname .real {
		height: 7vw;
		padding: 0 2vw 0 3vw;
		border-radius: 7vw;
		background-color: #FC5D20;
		display: flex;
		align-items: center;
	}

	.name_box .name_text .realname .real .t {
		font-size: 3vw;
		color: #fff;
		margin-right: 0.5vw;
	}

	.name_box .name_text .realname .real .r {
		font-size: 2.7vw;
		color: #fff;
	}

	.name_box .message {
		position: relative;
		margin-right: 4%;
	}

	.name_box .message .icon {
		font-size: 8vw;
		color: #333;
	}

	.name_box .message .round {
		height: 3vw;
		width: 3vw;
		box-sizing: border-box;
		border-radius: 50%;
		text-align: center;
		position: absolute;
		right: 0vw;
		top: 0;
		background-color: #FC5D20;
		color: #fff;
	}

	.menu_box {
		width: 100%;
		margin: 0 auto;
		display: flex;
		padding: 6vw 0;
		border-radius: 2vw;
		margin-top: 4%;
		background-color: #fff;
		border-radius: 3vw;
	}

	.menu_box .menu {
		flex: 1;
	}

	.menu_box .menu .num {
		font-size: 5vw;
		font-weight: bold;
		color: #1d1f24;
		text-align: center;
	}

	.menu_box .menu .text {
		font-size: 3.2vw;
		color: #7C8191;
		text-align: center;
		margin-top: 1vw;
	}

	.apply_box {
		background-color: #FC5D20;
		padding: 1px;
		border-radius: 3vw;
		margin-top: 4%;
	}

	.apply_box .title_box {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 4vw;
		height: 13vw;
	}

	.apply_box .title_box .title {
		font-size: 4.2vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
	}

	.apply_box .title_box .arrow {
		background-color: #D64F1B;
		height: 8vw;
		padding: 0 2vw 0 3vw;
		border-radius: 2vw;
		display: flex;
		align-items: center;
	}

	.apply_box .title_box .arrow .i {
		font-size: 5vw;
		color: #fff;
		margin-right: 1vw;
	}

	.apply_box .title_box .arrow .t {
		font-size: 3.2vw;
		color: #fff;
		margin-right: 1vw;
	}

	.apply_box .title_box .arrow .a {
		font-size: 3vw;
		color: #fff;
	}

	.apply_box .apply_menu {
		width: 100%;
		border-radius: 3vw;
		padding: 4vw 0;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	.apply_box .apply_menu .menu {
		flex: 1;
	}

	.apply_box .apply_menu .menu .icon {
		width: 8vw;
		margin: 0 auto;
	}

	.apply_box .apply_menu .menu .icon image {
		width: 100%;
	}

	.apply_box .apply_menu .menu .text {
		font-size: 3.2vw;
		color: #2A3141;
		margin-top: 1.5vw;
		text-align: center;
	}

	.list_box {
		margin-top: 4%;
		background-color: #fff;
		padding: 2% 4%;
		border-radius: 3vw;
	}

	.list_box .list {
		width: 100%;
		height: 14vw;
		display: flex;
		align-items: center;
	}

	.list_box .list .icon {
		width: 6vw;
		margin-right: 3vw;
	}

	.list_box .list .icon image {
		width: 100%;
	}

	.list_box .list .title {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		margin-right: 3vw;
	}

	.list_box .list .text {
		font-size: 3.5vw;
		color: #7C8191;
		margin-right: 1vw;
	}

	.list_box .list .time {
		font-size: 3.5vw;
		color: #FC5D20;
	}

	.list_box .list .arrow {
		flex: 1;
		font-size: 3.5vw;
		color: #CCCDD4;
		margin-left: 3vw;
		text-align: right;
	}

	/* 弹窗 */
	.show_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 999;
	}

	.show_box .pupu_box {
		width: 100%;
		position: absolute;
		background-color: #fff;
		border-radius: 3vw 3vw 0vw 0vw;
		text-align: center;
		bottom: 0vw;
	}

	.show_box .pupu_box .text {
		width: 100%;
		text-align: left;
		font-size: 16px;
		font-weight: bold;
		color: #333;
		padding: 5vw 0vw 0vw 5vw;
	}

	.show_box .shuom {
		font-size: 4vw;
		color: #666;
		text-align: left;
		line-height: 25px;
		width: 90%;
		margin: 20px auto;
	}

	.loky {
		display: flex;
		justify-content: space-between;
		width: 80%;
		margin: auto;
		padding-bottom: 3vw;
	}

	.xx {
		color: #07c160;
		background-color: #f2f2f2;
		width: 45%;
		height: 10vw;
		line-height: 10vw;
		font-size: 4vw;
		font-weight: bold;
		border-radius: 2vw;
	}

	.xt {
		color: #fff;
		background-color: #07c160;
		width: 45%;
		height: 10vw;
		line-height: 10vw;
		font-size: 4vw;
		font-weight: bold;
		border-radius: 2vw;
	}
</style>